<script setup lang="ts">
//工具
import Backtop2x from "@/assets/base/shop/icon-backtop@2x.png";
import Backtop3x from "@/assets/base/shop/icon-backtop@3x.png";
import Cus2x from "@/assets/base/shop/icon-cus-service@2x.png";
import Cus3x from "@/assets/base/shop/icon-cus-service@3x.png";

const imgBacktop2x = `url(${Backtop2x})`;
const imgBacktop3x = `url(${Backtop3x})`;

const imgCus2x = `url(${Cus2x})`;
const imgCus3x = `url(${Cus3x})`;

//https://juejin.cn/post/6844903828492386317
const scrollToTop = () => {
  let sTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (sTop > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, sTop - sTop / 8);
  }
};
</script>
<template>
  <aside class="service-fixed-bar">
    <figure class="bar-item cus-service">
      <span class="icon icon-cus-service"></span>
      <figcaption class="txt">联系客服</figcaption>
    </figure>
    <figure class="bar-item backtop" @click="scrollToTop">
      <span class="icon icon-backtop"></span>
      <figcaption class="txt">回到顶部</figcaption>
    </figure>
  </aside>
</template>
<style scoped lang="less">
.service-fixed-bar {
  position: fixed;
  right: 24px;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  z-index: 999;
  width: 80px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  .bar-item {
    width: 80px;
    height: 80px;
    padding: 12px 0 9px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    position: relative;
  }
  .icon {
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 5px;
    background: rgba(0, 0, 0, 0.1);
  }
  .icon.icon-cus-service {
    --bg-image-2x: v-bind(imgCus2x);
    --bg-image-3x: v-bind(imgCus3x);
    background: var(--bg-image2x) no-repeat 50%;
    background-image: -webkit-image-set(
      var(--bg-image-2x) 1x,
      var(--bg-image-3x) 2x
    );
    background-image: image-set(var(--bg-image-2x) 1x, var(--bg-image-3x) 2x);
    background-size: 36px;
  }
  .icon.icon-backtop {
    --bg-image-2x: v-bind(imgBacktop2x);
    --bg-image-3x: v-bind(imgBacktop3x);
    background: var(--bg-image) no-repeat 50%;
    background-image: -webkit-image-set(
      var(--bg-image-2x) 1x,
      var(--bg-image-3x) 2x
    );
    background-image: image-set(var(--bg-image-2x) 1x, var(--bg-image-3x) 2x);
    background-size: 36px;
  }
}
</style>
